<!DOCTYPE html>
<html>

<head>
    <title>Leaflet.Measure</title>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #map {
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="../src/leaflet.measure.css" />
    <script type="text/javascript" src="../src/leaflet.measure.js"></script>
    <link rel="stylesheet" type="text/css" href="../src/leaflet.fullscreen.css" />
    <script type="text/javascript" src="../src/leaflet.fullscreen.js"></script>
</head>

<body>
    <div id="map"></div>
</body>
<script type="text/javascript">
    var map = L.map("map", {
        crs: L.CRS.EPSG3857,
        center: [45, 0],
        zoom: 3
    });
    let img_url = "http://t0.tianditu.gov.cn/img_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
        "&tk=YourToken";    
    var tdt_img = L.tileLayer(img_url, {
        id: "tdt_img",
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">天地图</a> contributors',
        maxZoom: 18,
        bounds: [[-90, -180], [90, 180]],
        noWrap: true
    }).addTo(map);

    L.Measure = {
        linearMeasurement: "距离",
        areaMeasurement: "面积",
        start: "开始",
        meter: "m",
        kilometer: "km",
        squareMeter: "m²",
        squareKilometers: "km²",
    };

    var measure = L.control.measure({}).addTo(map);

    map.addControl(new L.Control.Fullscreen());

</script>

</html>